<template>
  <basic-container>
    <avue-crud
      :option="option"
      :data="data"
      ref="crud"
      @row-update="rowUpdate"
      @search-change="searchChange"
      @search-reset="searchReset"
      @row-save="rowSave"
      @row-del="rowDel"
      @selection-change="selectionChange"
    >
      <template slot="menuLeft">
        <el-button type="danger" size="small" icon="el-icon-delete" plain @click="handleDelete">删除</el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>
<script>
import { getAllOrder, search, addOrder, removeOrder, dropOrder, updateOrder } from '@/api/system/order'
export default {
  name: 'order',
  data() {
    return {
      query: {},
      // page: {
      //   pageSize: 10,
      //   currentPage: 1,
      //   total: 0
      // },
      selectionList: [],
      option: {
        tip: false,
        selection: true,//选中
        viewBtn: true,//查看按钮
        // tree: true,
        border: true,
        // index: true,
        column: [
          {
            label: "订单名称",
            prop: "name",
            search: true,
            rules: [{
              required: true,
              message: "请输入订单名称",
              trigger: "blur"
            }]
          },
          {
            label: "图片",
            prop: "picture"
          },
          {
            label: "订单号",
            prop: "id"
          },
          {
            label: "手机号",
            prop: "phone"
          },
          {
            label: "订单类型",
            prop: "orderType",
            type: "select",
            props: {
              label: 'typename',
              value: 'typeid'
            },
            dicUrl: "http://localhost:3001/type",
            rules: [{
              required: true,
              message: "请选择订单类型",
              trigger: "blur"
            }]
          },
          {
            label: "订单状态",
            prop: "status",
            type: "select",
            props: {
              label: 'statusname',
              value: 'statusid'
            },
            dicData: [
              {
                statusid: 0,
                statusname: "等待中",
              },
              {
                statusid: 1,
                statusname: "进行中"
              },
              {
                statusid: 2,
                statusname: "已完成"
              }
            ],
            rules: [{
              required: true,
              message: "请选择订单状态",
              trigger: "blur"
            }]
          }, {
            label: "评论",
            prop: "remark"
          }
        ]
      },
      data: [

      ]
    }
  },
  computed: {
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele._id);
      });
      return ids;
    }
  },
  methods: {
    async pageinit() {
      getAllOrder().then(res => {
        // console.log(res)
        if (res.status) {
          this.data = res.data
        }
      })
    },
    selectionChange(list) {
      this.selectionList = list;
      // console.log(list)
    },
    searchChange(params) {
      search(params.name).then(res => {
        this.data = res.data
      })
    },
    searchReset() {
      this.query = {};
      this.pageinit()
    },
    rowSave(row, loading, done) {
      addOrder(row).then(() => {
        loading();
        // this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        })
        this.pageinit()

      }, error => {
        done();
        console.log(error);
      })

    },
    rowDel(row) {
      // console.log(row)
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return removeOrder(row._id);
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.pageinit()
        });

    },
    rowUpdate(row, index, loading, done) {
      // console.log(index)
      updateOrder(row).then(() => {
        // console.log(row)
        loading();
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        this.pageinit()
      }, error => {
        done();
        console.log(error);
      });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return dropOrder(this.ids);
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.pageinit()
          this.$refs.crud.toggleSelection();
        });

    }
  },
  mounted() {
    getAllOrder().then(res => {
      // console.log(res)
      if (res.status) {
        this.data = res.data
      }
    })
  }
}
</script>
<style lang="less" scoped>
</style>